<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{
        background-color: #ECEFF4;
    }
    .data_body{
        width: 100%;
        vertical-align: middle;
    }
    .data_content{
        display: inline-block;
        border-radius: 3px;
        width: 13.8%;
        background-color: white;
        margin: 0 5px 10px 0;
    }
    .data_title{
        height: 50px;
        line-height: 50px;
        background-color: #222222;
        color: white;
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
        text-align: center;
    }
    .data_value{
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

    /*媒体查询*/
    /*当页面大于1200px时，大屏幕，主要是pc端*/
    @media (min-width: 1200px) {
        .data_content{
            width: 13.5%;
        }
    }
    /*在992和1199像素之间的屏幕里，中等屏幕，分辨率低的pc*/
    @media (min-width: 992px) and (max-width: 1199px) {
        .data_content{
            width: 13.2%;
        }
    }
    /*在768和991像素之间的屏幕里，小屏幕，主要是PAD*/
    @media (min-width: 768px) and (max-width: 991px){
        .data_content{
            width: 32%;
        }
    }
    /*在480和767像素之间的屏幕里，超小屏幕，主要用于手机*/
    @media (min-width: 480px) and (max-width: 767px) {
        .data_content{
            width: 31%;
        }
    }
    /*在小于480像素的屏幕，微小屏幕，更低分辨率的手机*/
    @media (max-width: 479px) {
        .data_content{
            width: 47.5%;
        }
    }
</style>
<body>
    <div class="data_body">
        <div class="data_content">
            <div class="data_title">总用户数</div>
            <div class="data_value">{$total}人</div>
        </div>
        <div class="data_content">
            <div class="data_title">新增用户数</div>
            <div class="data_value">{$new_user}人</div>
        </div>
        <div class="data_content">
            <div class="data_title">活跃用户数</div>
            <div class="data_value">{$active_user}人</div>
        </div>
        <div class="data_content">
            <div class="data_title">今日充值量</div>
            <div class="data_value">{$active_user}元</div>
        </div>
        <div class="data_content">
            <div class="data_title">累计充值量</div>
            <div class="data_value">{$cumulative_recharge}元</div>
        </div>
        <div class="data_content">
            <div class="data_title">今日收益</div>
            <div class="data_value">{$today_profit}元</div>
        </div>
        <div class="data_content">
            <div class="data_title">累计收益</div>
            <div class="data_value">{$cumulative_profit}元</div>
        </div>
    </div>
</body>
</html>